<template>
  <div id="container">
    <!-- 头部 -->
    <div class="header">
      <headerTou></headerTou>
      <div class="tabs">
        <div @click="fanhui"><i class="el-icon-caret-left"></i>返回</div>
        <img :src="user.dataVLogo ? user.dataVLogo : ''" class="logo" />
      </div>

      <div class="header_right">
        <el-tooltip
          class="item"
          effect="dark"
          :content="fullScreenContent"
          placement="bottom"
        >
          <i :class="quanping1" @click="onFullScreen"></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="后台系统"
          placement="bottom"
        >
             <i class="iconfont houtai-xitongguanli tableBtnIcon" @click="onHoutai"></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="退出"
          placement="bottom"
        >
           <i class="iconfont tuichu1 tableBtnIcon" @click="exit"></i>
        </el-tooltip>
      </div>
    </div>

    <!-- 右侧 -->
    <div class="right">
      <div class="right_alarm">
        <div class="right_bottom2">
          <monitoring ref="refmonitoring" @getFinish="getFinish"></monitoring>
        </div>
      </div>
    </div>

    <el-dialog
      title="确认提示"
      :visible.sync="dialogVisibleFinish"
      width="480px"
      :before-close="closeDialogFinish"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :modal="true"
      class="finish"
    >
      <div>此操作将下发 {{ keyCommandsend.keyName }} 指令, 是否继续?</div>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="primary"
          @click="submitFinish"
          v-preventReClick="1000"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import headerTou from "./components/headerTou.vue"; //头部组件
import monitoring from "./components/monitoring.vue"; //头部组件
import { reqLogout } from "@api/apiDatav.js";
import { reqKeyCommandSend } from "@api/api.js";
import { mapState, mapMutations } from "vuex";
import screenfull from "screenfull"; //全屏
import { onDestory } from "@utils/map/map";

export default {
  name: "",
  components: {
    headerTou,
    monitoring,
  },
  data() {
    return {
      fullScreenContent: "全屏",
      quanping1: 'iconfont pc-quanping tableBtnIcon',
      quanping2: require("@assets/images/datav/quanping2.png"),
      xitong: require("@assets/images/datav/xitong.png"),
      tuichu: require("@assets/images/datav/tuichu.png"),
      logo: require("@assets/images/logo4.png"),
      dialogVisibleFinish: false,
      keyCommandsend: {},
      imei: "",
    };
  },
  computed: {
    ...mapState(["user", "datav", "config"]),
  },
  watch: {},
  beforeDestroy() {},
  async mounted() {
    await this.$refs.refmonitoring.ProductList(); // 获取设备列表
    await this.$refs.refmonitoring.getDataList(); // 获取设备列表
  },
  async activated() {},
  async created() {},
  methods: {
    ...mapMutations([
      "saveorgarr",
      "saveIsWhiteTheme",
      "saveflagDatav",
      "savebuildingsArr",
      "savefloorId",
      "savefloorFlag",
      "savespacesArr",
      "savespacesFlag",
    ]),
    getFinish(item, imei) {
      this.dialogVisibleFinish = true;
      this.keyCommandsend = item;
      this.imei = imei;
    },
    async submitFinish() {
      var res = await reqKeyCommandSend({
        // "deviceCode": this.imei,//父设备编号
        deviceCode: this.keyCommandsend.deviceCode,
        id: this.keyCommandsend.id,
      });
      if (res.code !== 20000) {
        this.dialogVisibleFinish = false;
        this.$modal.notifyWarning(res.message);
        return;
      }
      this.$modal.notifySuccess("指令下发成功");
      this.dialogVisibleFinish = false;
    },
    closeDialogFinish() {
      this.dialogVisibleFinish = false;
    },
    // 回到租户
    fanhui() {
      this.$router.go(-1);
      this.$refs.refmonitoring.closeAddDialog(); //关闭
    },

    //后台系统
    onHoutai() {
      this.saveIsWhiteTheme(false);
      // this.$router.replace("/org/list")
      if (
        this.user.roleName == "INSTERALL_USER" ||
        this.user.roleName == "UNIT_ADMIN"
      ) {
        this.$router.replace("/org/list");
      } else {
        this.$router.replace("/enterprise/org");
      }
      onDestory(); // 销毁地图
    },
    // 全屏
    onFullScreen() {
      // if (!screenfull.isEnabled) {
      //   this.$modal.notifyWarning("你的浏览器不支持全屏");
      //   return false;
      // }
     if (screenfull.element == null) {
        this.fullScreenContent = "退出全屏";
        this.quanping1 = 'iconfont compress tableBtnIcon';
      } else {
        this.fullScreenContent = "全屏";
        this.quanping1 = 'iconfont pc-quanping tableBtnIcon';
      }
      screenfull.toggle();
    },
    // 退出
    exit() {
      this.$confirm("确定要退出账号吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await reqLogout({ id: this.user.userId });
          sessionStorage.clear();
          this.$router.push("/login");
          window.location.reload(); //页面重新加载一次即可清空vuex
          onDestory(); // 销毁地图
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./mainframe.less");

// 二次确认弹窗样式
::v-deep .finish .el-dialog__body {
  min-height: 50px !important;
  background: #09143f !important;
  overflow-y: auto;
  padding: 20px !important;
  color: #f1f1f1;
}

::v-deep .el-dialog {
  background: #09143f;
}

::v-deep .el-dialog__header {
  display: block !important;
  border-bottom: 1px solid #06b1e76e;
  background: #09143f !important;
  padding: 20px !important;
  border-radius: 10px 10px 0 0;
}

::v-deep .el-dialog__footer {
  background: #09143f !important;
}

.el-button--primary {
  border: 1px solid #01def9 !important;
  color: #d1d1d1 !important;
  background: #000f4a !important;
}
</style>